<template>
  <div class="hostShopSetting flexRSS">
    <!--门店左边-->
    <div class="hostShopSetting-lf">
      <ShopListMenu @emitShopId="emitShopId" />
    </div>
    <!--右边-->
    <div class="hostShopSetting-rt app-main-content-box">
      <!--资源详情-->
      <div class="source-style flexRBC">
        <div class="shop-facility-title">{{ shopName }}</div>
        <el-button
          v-if="!$store.getters.banBtnList.includes('BTN_DEPOSIT_BRANCH_CONFIG_COPY')&&$store.state.user.shopId===0"
          type="primary"
          size="small"
          round
          @click="handleCopy"
        >复制设置到</el-button>
      </div>
      <!--table标签选择器-->
      <div class="content-tab">
        <el-tabs v-model="tabName">
          <el-tab-pane label="基础设置" name="baseSetting">
            <BaseSetting ref="BaseSetting" :shop-id="shopId" :tab-name="tabName" />
          </el-tab-pane>
          <el-tab-pane label="单据设置" name="billSetting">
            <BillSetting ref="BillSetting" :shop-id="shopId" :tab-name="tabName" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--复制-->
    <DialogShopListTree ref="dialogShopListTree" title="复制店铺配置到门店" @emitShopIds="emitShopIds" />
  </div>
</template>

<script>
import BaseSetting from './components/BaseSetting.vue'
import BillSetting from './components/BillSetting.vue'
import { copyDepositShopConfig } from './api/shop'
export default {
  components: {
    BaseSetting,
    BillSetting
  },
  data() {
    return {
      tabName: 'baseSetting',
      shopId: '',
      shopName: ''
    }
  },
  created() {},
  mounted() {},
  methods: {
    /**
       * 按钮组
       */
    // 复制到
    handleCopy() {
      this.$refs.dialogShopListTree.open()
    },

    // 选择门店ids回调
    emitShopIds(ids) {
      if (ids.length === 0) {
        this.$alert('请至少选择一个门店复制', '提示', {
          confirmButtonText: '确定',
          center: true,
          type: 'warning',
          callback: action => {}
        })
      } else {
        this.$refs.dialogShopListTree.loading()
        copyDepositShopConfig({ fromShopId: this.shopId, toShopIdList: ids })
          .then(res => {
            this.$alert('复制店铺配置成功', '提示', {
              confirmButtonText: '确定',
              center: true,
              type: 'success',
              callback: action => {}
            })
            this.$refs.dialogShopListTree.hide()
          })
          .finally(() => {
            this.$refs.dialogShopListTree.loading(false)
          })
      }
    },

    // 选择门店
    emitShopId(item) {
      this.shopId = item.shopId
      this.shopName = item.shopName
      this.$refs.BaseSetting.componentActive({ shopId: this.shopId })
      this.$refs.BillSetting.componentActive({ shopId: this.shopId })
    }
  }
}
</script>

<style scoped lang="scss">
  .hostShopSetting-rt {
    width: 100%;
    .source-style {
      margin-bottom: 16px;
      .shop-facility-title {
        font-size: 18px;
      }
    }
  }
</style>
